<template>
  <view>
    <view
      class="player-item"
      v-for="(player, index) in playerList"
      :key="index"
    >
      <image :src="getOneFromCover(player.cover)" class="player-img" />
      <view class="player-info">
        <view class="player-header">
          <view class="player-name">
            {{ player.tittle }}
          </view>
        </view>
        <text class="player-desc">{{ player.intro }}</text>
        <text class="player-reason">拒绝原因：{{ player.cause }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  playerParamsType,
  playerResponseType,
  PublishState,
} from "@/types/vote";
import { getPlayerListAPI } from "@/api/player";
import { getOneFromCover } from "@/utils/vote";

onLoad(async () => {
  await getPlayerList();
});

// 接收页面参数
const query = defineProps<{
  id: string;
}>();

const pageParams: playerParamsType = reactive({
  actId: query.id,
  page: 1,
  size: 999,
  state: PublishState.rejected,
  tittle: "",
});

const playerList = ref<playerResponseType[]>([]);

// 获取选手列表
const getPlayerList = async (searchValue: string = "") => {
  pageParams.tittle = searchValue;
  const res = await getPlayerListAPI(pageParams);
  playerList.value = res.data.records;
};

defineExpose({ getPlayerList });
</script>
<style scoped lang="scss">
.player-item {
  display: flex;
  margin: 10rpx 0;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  .player-img {
    width: 200rpx;
    height: 200rpx;
  }
  .player-info {
    flex-grow: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .player-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .player-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }
    .player-desc {
      font-size: 24rpx;
      color: #666;
    }
    .player-reason {
      font-size: 24rpx;
      color: #f50;
    }
  }
}
</style>
